<template>
  <div id='importInstance'>
    <!-- 上方查询框 -->
    <div style='height: 40px;'>
      <div style='float: left;'>
        <el-select v-model='cloudPlatformId' style='width: 200px' size='mini' placeholder='请选择云平台' clearable>
          <el-option v-for='option in cloudPlatformList' :label='option.platformName' :key='option.id'
                     :value='option.id'/>
        </el-select>
        <el-button :disabled="isDisabled" @click='getImportInstance()' type='primary' size='mini'>{{ $t('instance.search') }}
        </el-button>
        <el-button @click='importInstances()' type='primary' size='mini' :disabled='multipleSelection.length == 0'>
          {{ $t('instance.batchImport') }}
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <table-contain :height.sync='table.maxHeight'>
      <el-table :data='tableData' slot='table' :height="table.maxHeight"
                ref='multipleTable' border highlight-current-row @selection-change='handleSelectionChange'>
        <el-table-column type='selection' align='center' width='55'  :selectable='handleTableSelectStatus'>

        </el-table-column>
        <el-table-column prop='instanceName' :label="$t('instances.instanceName')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='stateName' :label="$t('instances.stateName')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop='stateName' :label="$t('instances.stateName')" min-width='50'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-html="getStateIcon(scope.row.state, scope.row.stateName)" style="text-align: center;"></div>
          </template>
        </el-table-column> -->
        <el-table-column prop='cloudPlatformName' :label="$t('instances.cloudPlatformName')"
                         width='120'></el-table-column>
        <el-table-column prop='regionName' :label="$t('instances.regionName')" min-width='60'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='zoneName' :label="$t('instances.zoneName')" min-width='60'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='instanceChargeTypeName' :label="$t('instances.instanceChargeTypeName')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='engineVersion' :label="$t('instances.engineVersion')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='dbInstanceClass' :label="$t('instances.dbInstanceClass')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='dbInstanceStorage' :label="$t('instances.dbInstanceStorage')" min-width='120'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='importStateName' :label="$t('instances.importStateName')" min-width='120'
                         show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination
        slot='footer' @size-change='handleSizeChange' @current-change='handleCurrentChange'
        :current-page='currentPage' :page-sizes='[10,20,50,100,1000]' :page-size='pageSize'
        layout='total, sizes, prev, pager, next' :total='totalSize'>
      </el-pagination>
    </table-contain>
  </div>
</template>

<script>
import model from '@/public/indexModel.js'
import local from './js/local.js'
import pubVmApi from "../../../api/pubVmApi";
import pubCloudApi from "../../../api/pubCloudApi";
import pubRDSApi from "../../../api/pubRDSApi";

export default {
  name: 'pubImportMysql',
  mixins: [model],
  i18n: {
    messages: local
  },
  data() {
    return {
      cloudPlatformList: [],
      cloudPlatformId: '',
      regionList: [],
      tableData: [],
      multipleSelection: [],
      pageSize: 20,
      totalSize: 0,
      currentPage: 1
    }
  },
  mounted() {
    this.getCloudPlatformList()
  },
  computed: {
    isDisabled() {
      return this.cloudPlatformId === ''
    }
  },
  methods: {
    getCloudPlatformList() {
      pubCloudApi.vdcListRequest({pageNo: 1, pageSize: 10000}).then(({data}) => {
        this.cloudPlatformList = data.pageData
      })
    },
    handleTableSelectStatus(row, index) {
      if (row.importState === 'UN_IMPORT') {
        return 1 || 2
      } else {
        return 0
      }
    },
    getImportInstance() {
      let _self = this
      let req = {
        dataCenterId: this.cloudPlatformId,
        pageNumber: 1,
        pageSize: 20,
      }
      _self.createDefaultMLoading('#importInstance')
      _self.mloading.show()
      pubRDSApi.getMysqlImportList(req).then(({data}) => {
        _self.mloading.hide()
        _self.tableData = data.pageData
      }).catch((error) => {
        _self.mloading.hide()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 导入动作
    importInstances() {
      const _self = this
      const ids = []
      for (let i = 0; i < _self.multipleSelection.length; i++) {
        ids.push(_self.multipleSelection[i]['instanceId'])
      }

      // 导入接口请求参数
      const param = {
        dataCenterId: this.cloudPlatformId,
        platformResourceIds: ids
      }

      pubRDSApi.mysqlImportRequest({
        params: param
      }).then((data) => {
        _self.mloading.hide()
        this.$message({type: 'success', message: '导入成功'})
        _self.getImportInstance()
      }).catch((error) => {
        _self.mloading.hide()
        this.$message({type: 'success', message: '导入失败'})
        console.error(error)
      }).then(() => {
      })

    }
  }
}
</script>

<style lang='scss'>
@import '../../../assets/iconfont/iconfont.css';
</style>
